<template>
	<wsPage title="汇率列表">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel @page-change="query">
			<div slot="list_operate">
				<Button  @click="status = !status">新增</Button>
				<Button  @click="saveExchangeRateList">批量保存</Button>
                <Button  @click="saveExchangeRateList1">保存并立即生效</Button>
			</div>

			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%" class="emoji-list">
					<ws-table-column align="center" prop="from" label="源换算货币"></ws-table-column>
					<ws-table-column align="center" prop="to" label="目标换算货币"/>
					<ws-table-column align="center" prop="rate" label="换算汇率">
                        <template slot-scope="scope">
                            <input v-model="scope.row.rate" placeholder="请输入内容"   style="padding:0 7px;"  class="placeStyle"/>
                        </template>
                    </ws-table-column>
					<ws-table-column align="center" prop="updateDate" label="最后修改时间"></ws-table-column>
				
					<ws-table-column align="center" width="120" label="操作">
						<template slot-scope="scope">
							<Button @click="saveExchangeRate(scope.row)" type="text" size="small">保存</Button>
							<Button @click="delExchangeRate(scope.row)" type="text" size="small">删除</Button>
      					</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>
		<wsModal v-model="status" title="新增货币汇率"  @on-cancel="status = !status" @on-ok="saveAddExchangeRate">
			<Form :model="queryForm" :label-width="100" inline>
				<FormItem label="源货币">
					<Select v-model="params.from" filterable clearable class="ws-form-select" >
						<Option v-for="item in currencyList" :value="item.value" :key="item.value">{{item.name}}({{item.type}})</Option>
					</Select>
				</FormItem>
				<FormItem label="目标货币">
					<Select v-model="params.to" filterable clearable class="ws-form-select" >
						<Option v-for="item in currencyList" :value="item.value" :key="item.value">{{item.name}}({{item.type}})</Option>
					</Select>
				</FormItem>
				<FormItem label="汇率">
					<Input v-model="params.rate" placeholder="请输入汇率"></Input>
				</FormItem>
			</Form>
		</wsModal>
	</wsPage>
	
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				params:{
					"from" : '',
					"to" : '',
					"from_currency_type": '',
					"to_currency_type":'',
					"rate":''
				},
				// rate:0,//汇率
				// formCurrency:'',//源货币
				// toCurrency:'',//目标货币
				currencyList:[],//货币类型
				status:false,//新增汇率弹框
				table: {
					data: []
                },
                obj: {
                    id: null,
                    from: '',
                    to: '',
                    rate:0.0,
                    createDate:'',
                    updateDate:'',
                    status:0
                }
			}
		},
		computed: {
	
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.query();
				this.getCurrencyType();//获取货币类型
			},
			//获取货币类型
			getCurrencyType(){
				let that = this;
				this.axios.get('woauth/s/currencies',{
					'Content-type' : 'application/json',
				}).then(function(res){
					console.log(res);
					let list = res.data;
					if(list.data.length != 0){
						list.data.forEach(function(v){
							// console.log(res);
							v.value = v.name + '(' + v.type + ');' + v.symbol; 
						});
					}
					that.currencyList = list.data;
				})
			},
            /**
			 * 刷新
			 */
			refresh() {
                this.table.data = [];
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {

				const _this = this;
				this.axios.get('/ws/ops/v2/exchange/rate').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						this.table.data = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
            },
            /**
             * 修改单个汇率
             */
            saveExchangeRate(row) {
                const _this = this;
                _this.obj = row;
                this.axios.put('/ws/ops/v2/exchange/rate', _this.obj).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.$Message.warning(resMeta.message);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
                
			},
			//删除货币兑换
			delExchangeRate(row){
				let _row = row;
				let _this = this;
				_this.axios.delete('/ws/ops/v2/exchange/rate/'+ _row.id,{
					'Content-type' : 'application/json'
				}).then(function(response){
					var res = response.data;
					var resMeta = res.meta;
					_this.$Message.warning(resMeta.message);
					if (0 == resMeta.code) {
						
						_this.query();
					}
				});
			},
			//保存货币汇率
			saveAddExchangeRate(){
				let _this = this;
				if(_this.params.from == ''){
					_this.$Message.warning('请选择源货币类型');
				}else if(_this.params.to == ''){
					_this.$Message.warning('请选择目标货币类型');
				}else if(_this.params.rate == ''){
					_this.$Message.warning('请填写汇率');
				}else{
					let params = {
					"from":_this.params.from.split(";")[0],
  					"to":_this.params.to.split(";")[0],
  					"from_currency_type":_this.params.from.split(";")[1],
  					"to_currency_type":_this.params.to.split(";")[1],
  					"rate":_this.params.rate
				}
				_this.axios.post('/ws/ops/v2/exchange/rate/add',params,{
					'Content-type' : 'application/json'
					}).then(function(response){
						var res = response.data;
						var resMeta = res.meta;
						_this.$Message.warning(resMeta.message);
					if (0 == resMeta.code) {
						_this.params = {
							"from":'',
  							"to":'',
  							"from_currency_type":'',
  							"to_currency_type":'',
  							"rate":''
							}
						_this.query();
						}
					});
				}
				
			},
            /**
             * 批量修改汇率
             */
            saveExchangeRateList() {
                const _this = this;
                console.log(_this.table.data);
                
                this.axios.put('/ws/ops/v2/exchange/rate/list/1', _this.table.data).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
                        _this.$Message.warning(resMeta.message);
                        this.init();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
                
            },
                        /**
             * 批量修改汇率并更新至Redis
             */
            saveExchangeRateList1() {
                const _this = this;
                console.log(_this.table.data);
                
                this.axios.put('/ws/ops/v2/exchange/rate/list/2', _this.table.data).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
                        _this.$Message.warning(resMeta.message);
                        this.init();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
                
            }
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.title-row {
		padding: 10px;
	}
	.ws-icon {
		font-size: 30px;
	}
</style>
<style>
	img.emoji {
	    width: 2em !important;
	    height: 2em !important;
	}
    input::-webkit-input-placeholder{
        margin-left:20px !important;    
    }
    input:focus::-webkit-input-placeholder {
    color: red;
}
</style>